<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>博客 - 专业拷贝 - 专业分享资源 - 拷贝我们是专业的</title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<!-- 新 Bootstrap4 核心 CSS 文件 -->
		<link rel="stylesheet" href="./css/bootstrap.min.css">
		<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
		<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
		<!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
		<!-- 子然于梦，必然精彩。 -->
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
		<style type="text/css">
			/* 设置全局样式 */
			html,
			body,
			div,
			span,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			a,
			em,
			img,
			dd,
			p,
			dl,
			dt,
			ul,
			li,
			ol,
			form,
			label,
			table,
			tr,
			td,
			input {
				margin: 0;
				padding: 0;
				color: #ffffff;
			}
			/* a标签 隐藏下划线 */
			a {
				text-decoration: none;
				color: #707070;
			}
		</style>
	</head>
	<body>
		<div class="hai-zhu">
			<div class="hai-zhu-top" align="center">
				博&nbsp;&nbsp;&nbsp;客
			</div>
			<div class="hai-zhu-but">
				<div class="hai-login">登&nbsp;&nbsp;录</div>
				<div class="hai-zc">注&nbsp;&nbsp;册</div>
				<div class="hai-bq">
					暂不注册，就只看看
				</div>
			</div>
			
			<!-- login页面 -->
			<div class="hai-login-body" align="center">
				
				<div class="hai-login-z">
					<img src="./img/X.png" style="width: 30px;height: 30px;position: absolute;right: 25px;" class="qx">
					<div class="container" style="padding-top: 25px;">
						<h4 style="color: #000000;font-family: " Times New Roman", Times, serif;">登&nbsp;录</h4>
						<form style="margin-top: 25px;">
							<div class="form-group">
								<label for="username" style="color: #000000;">Username:</label>
								<input type="text" class="form-control" id="username" placeholder="Enter username">
							</div>
							<div class="form-group">
								<label for="pwd" style="color: #000000;">Password:</label>
								<input type="password" class="form-control" id="pwd" placeholder="Enter password">
							</div>
							<button type="submit" class="btn btn-primary">Login</button><br>
							<div style="color: #000000;font-size: 13px;position: absolute;right: 25px;margin-top: 25px;"
								class="reg">已有账号，前往登录。</div>
						</form>
					</div>
				</div>
				</div>
				<!-- reg页面 -->
				<div class="hai-reg-body" align="center">
						<img src="./img/X.png" style="width: 30px;height: 30px;position: absolute;right: 25px;" class="qx2">
					<div class="hai-login-z">
						<div class="container" style="padding-top: 25px;">
							<h4 style="color: #000000;font-family: " Times New Roman",Times, serif;">注&nbsp;册</h4>
							<form style="margin-top: 25px;">
								<div class="form-group">
									<label for="username" style="color: #000000;">Username:</label>
									<input type="text" class="form-control" id="username" placeholder="Enter username">
								</div>
								<div class="form-group">
									<label for="pwd" style="color: #000000;">Password:</label>
									<input type="password" class="form-control" id="pwd" placeholder="Enter password">
								</div>
								<div class="form-group">
									<label for="qq" style="color: #000000;">qq:</label>
									<input type="text" class="form-control" id="qq" placeholder="Enter qq">
								</div>
								<button type="submit" class="btn btn-primary">Reg</button><br>
								<span
									style="color: #000000;font-size: 13px;position: absolute;right: 25px;margin-top: 25px;"
									class="login">没有账号，前往注册。</span>
							</form>
						</div>
					</div>
			</div>

			<script type="text/javascript">
				$('.qx').click(function(){
					$('.hai-login-body').animate({
						bottom: "-420px"
					},function(){
						$('.hai-login-body').hide();
					});
				});
				$('.qx2').click(function(){
					$('.hai-reg-body').animate({
						bottom: "-420px"
					},function(){
						$('.hai-reg-body').hide();
					});
				});
				$('.hai-but-false').click(function() {
					$('.hai-tc').hide();
					$('.am-alert').alert()
				});
				$('.hai-login').click(function() {
					$('.hai-tc').hide();
					$('.hai-reg-body').hide();
					$('.hai-login-body').show();
					$('.hai-login-body').animate({
						bottom: "0px"
					});
				})
				$('.hai-zc').click(function() {
					$('.hai-tc').hide();
					$('.hai-login-body').hide();
					$('.hai-reg-body').show();
					$('.hai-reg-body').animate({
						bottom: "0px"
					});
				})
				$('.reg').click(function() {
					$('.hai-login-body').animate({
						bottom: "-420px"
					}, function() {
						$('.hai-reg-body').show();
						$('.hai-reg-body').animate({
							bottom: "0px"
						});
						$('.hai-login-body').hide();

					});

				})
				$('.login').click(function() {
					$('.hai-reg-body').animate({
						bottom: "-420px"
					}, function() {
						$('.hai-login-body').show();
						$('.hai-login-body').animate({
							bottom: "0px"
						});
						$('.hai-reg-body').hide();
				
					});
				
				})
			</script>
	</body>
</html>









